<template>
  <div>
    <!--class名称  判断是否执行true/false  -->
    <h1 v-bind:class="{ active: isActive }">你好</h1>
    <input type="checkbox" v-model="checked" />
    <span v-for="i in l">{{ i }}</span>
    <!-- :class="可以放一个对象名" -->
    <p :class="objclass">您好</p>
    <!-- 这里也可以放一个数组 -->
    <p :class="[ac]">您好</p>
    <p :class="[bool?"active":""]"></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bool: true,
      ac: "active",
      isActive: true,
      arr: [1, 2, 3, 4, 5, 6],
      lo: 0,
      checked: "",
      arrnew: [1, 2, 3, 4, 5, 6],
      objclass: {
        active: true,
        hs: true,
      },
    };
  },
  methods: {
    lis(index) {
      this.lo = index;
      console.log(this.lo);
    },
  },
  computed: {
    l() {
      return this.arrnew;
    },
  },
};
</script>
<style lang="css">
.active {
  background: red;
}
.fs {
  width: 500px;
  height: 100px;
  border: 1px solid #000;
  background: red;
}
.ac {
  background: red;
}
</style>
